<template>
    <div id="myEcharts" :style="{ width: '100%', height: '400px' }"></div>
</template>

<script setup>
import Item from "@/layout/components/Sidebar/Item.vue";
import * as echarts from "echarts";
let echart = echarts;
import { ref, onMounted, nextTick, onUpdated, watch } from "vue";

let props = defineProps({
    chartData: {
        type: Object,
        default: {}
    }
})
watch(
    () => props.chartData,
    async (value, oldValue) => {
        await nextTick()
        initChart()
    }, { immediate: true }
)
onMounted(async () => {
    await nextTick()
    initChart();
});

// 基础配置一下Echarts
function initChart() {
    var charts = echart.init(document.getElementById("myEcharts"));
    let xAxisData = []
    let seriesData = []
    var resData = props.chartData
    for (let index = 0; index < resData.length; index++) {
        const element = resData[index];
        xAxisData.push(element.year + '年' + element.month + "月")
        seriesData.push(element._sum.monthPayed)
    }
    // 把配置和数据放这里
    charts.setOption({
        title: {
            text: '考勤工资统计'
        },
        grid: {
            left: '0%',
            right: '0%',
            bottom: '0%',
            containLabel: true
        },
        xAxis: {
            type: "category",
            data: xAxisData
        },
        tooltip: {
            trigger: "axis"
        },
        yAxis: {
            type: "value",
            left: "0%",
        },
        series: [
            {
                data: seriesData,
                type: "bar",
                smooth: true
            }
        ]
    });
    window.addEventListener('resize', () => {
        charts.resize();
    });
}


</script>